<template>
  <div>
    <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />
    <van-field required placeholder="请输入用户名" v-model="form.loginName" label="文本" />
    <div class="eye">
      <van-field required placeholder="请输入密码" v-model="form.loginKey" :type="password" label="密码" />
      <Show @func="typeFun" class="show"/>
    </div>
    
    <div class="button_box">
      <van-button type="primary" @click="GoLogin">登录</van-button>
      <van-button type="default" @click="onClickLeft">取消</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapActions, mapState } from "vuex";
import Show from "../components/Show";
export default {
  name: "login",
  data() {
    return {
      form: {
        loginKey: "",
        loginName: ""
      },
      password:'password'
    };
  },
  components: {
    Show
  },
  computed: {
    ...mapState("user", ["msg"])
  },
  methods: {
    ...mapActions("user", ["LoginFun", "getUserFun"]),
    onClickLeft() {
      this.$router.back();
    },
    async GoLogin() {
      if (!this.form.loginName) {
        this.$toast("用户名不能为空");
        return;
      } else if (!this.form.loginKey) {
        this.$toast("密码不能为空");
        return;
      } else {
        await this.LoginFun(this.form);
        if (this.msg == "数据请求失败") {
          this.$toast("请输入正确的用户名和密码");
        } else {
          this.$toast("登录成功");
          this.$router.back();
        }
      }
    },
    typeFun(val){
      if(val){
        this.password=''
      }else{
        this.password="password"
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.van-button {
  width: 90%;
  margin: 10px;
}
.button_box {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.eye{
  position: relative;
}
.show{
  position:absolute;
  top: 13px;
    right: 10px;
}
</style>